<template>
  <div class="register">
    <el-form
      ref="registerForm"
      :model="registerForm"
      class="el-form"
      :rules="rules"
    >
      <label class="title" style="margin-bottom: 0.1rem">欢迎注册</label>
      <el-row style="margin-bottom: 0.9rem">
        <label>已有账号？</label>
        <el-button type="text" class="to-register" @click="toRegister()"
          >立即登录
        </el-button>
      </el-row>
      <label class="register-label">公司名称(必填)</label>
      <el-form-item class="marginTop" prop="userName">
        <el-input
          class="input-style"
          v-model="registerForm.userName"
          type="text"
          auto-complete="off"
          placeholder="请输入公司名称"
        >
        </el-input>
      </el-form-item>
      <label class="register-label">员工数量</label>
      <el-form-item prop="num" class="marginTop" style="width: 100%">
        <el-select
          v-model="registerForm.num"
          placeholder="请选择员工人数"
          style="width: 100%"
          class="input-style"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.value"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <label class="register-label">公司地址(选填)</label>
      <el-form-item prop="addr" class="marginTop">
        <el-input
          class="input-style"
          v-model="registerForm.addr"
          type="text"
          auto-complete="off"
          placeholder="请输入公司地址(选填)"
        >
        </el-input>
      </el-form-item>
      <label class="register-label">行业类型(必填)</label>
      <el-form-item prop="lx" class="marginTop">
        <el-select
          v-model="registerForm.lx"
          placeholder="请选择行业类型"
          style="width: 100%"
          class="input-style"
        >
          <el-option
            v-for="item in lx"
            :key="item.value"
            :label="item.value"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>

      <el-button
        type="primary"
        style="width: 100%; margin-top: 2rem"
        @click="submitForm('registerForm')"
        >下一步
      </el-button>
    </el-form>
  </div>
</template>

<script>
export default {
  name: "Register",
  data() {
    return {
      registerForm: {
        userName: "",
        addr: "",
        lx: "",
        num: "",
      },
      options: [
        {
          label: "1",
          value: "50人以下",
        },
        {
          label: "2",
          value: "50-100人",
        },
        {
          label: "3",
          value: "100-500人",
        },
        {
          label: "4",
          value: "500-1000人",
        },
        {
          label: "5",
          value: "1000人以下",
        },
      ],
      lx: [
        {
          label: "1",
          value: "商业服务",
        },
        {
          label: "2",
          value: "房地产|建筑业",
        },
        {
          label: "3",
          value: "金融业",
        },
        {
          label: "4",
          value: "IT|通信|电子|互联网",
        },
        {
          label: "5",
          value: "贸易|批发|零售|租赁业",
        },
        {
          label: "6",
          value: "文体教育|工艺美术",
        },
        {
          label: "7",
          value: "生产|加工|制造",
        },
        {
          label: "8",
          value: "交通|运输|物流|仓储",
        },
        {
          label: "9",
          value: "服务业",
        },
        {
          label: "9",
          value: "文化|传媒|娱乐|体育",
        },
        {
          label: "10",
          value: "能源|矿产|环保",
        },
        {
          label: "11",
          value: "政府|非盈利机构",
        },
        {
          label: "12",
          value: "农|林|牧|渔",
        },
        {
          label: "13",
          value: "服装|电子商务",
        },
        {
          label: "14",
          value: "其他",
        },
      ],
      rules: {
        userName: [
          { required: true, message: "请输入公司名称", trigger: "blur" },
        ],
        num: [{ required: true, message: "请选择员工人数", trigger: "change" }],
        lx: [{ required: true, message: "请选择行业类型", trigger: "change" }],
      },
    }
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$router.push({ path: "/RegisterNext" })
        } else {
          return false
        }
      })
    },
    toRegister() {
      this.$router.push({ path: "/" })
    },
  },
}
</script>
<style lang="scss" scoped>
@import "../assets/styles/common.scss";

.to-register {
  font-size: 62.5%;
}

.input-style /deep/ .el-input__inner {
  border: 0rem;
  border-radius: 0.2rem;
  background: #f7f7f7;
  padding: 0.7rem;
  color: #999999;
}

.register {
  width: 100%;
  height: 100%;
  background-image: url("../assets/login-bg.png");
  background-size: cover;
  display: flex;
  justify-content: flex-end;
}

.el-form {
  padding: 2rem;
  width: 22rem;
  background: rgb(255, 255, 255);
  margin: 4rem 7rem;
  border-radius: 0.3em;
}

.title {
  font-size: 3em;
  font-weight: bold;
  color: black;
}

.content {
  font-size: 16em;
  font-weight: bold;
  color: black;
}

.marginTop {
  margin-top: 0.2rem;
}

.register-label {
  font-weight: bold;
  color: #333333;
  font-size: 0.7rem;
}

.el-button--primary {
  color: #fff;
  background-color: $color-main;
  border-color: $color-main;
}

.el-button--primary:active {
  background: $color-blue-press;
}
</style>
